{{#unless isCustom}}
  {{cru-node-pools
    mode=mode
    cluster=cluster
    driver=nodeWhich
    nodeTemplates=model.nodeTemplates
    registerHook=(action "registerHook")
    setNodePoolErrors=(action "setNodePoolErrors")
  }}
{{/unless}}

{{#if hasLegacySnapshotSettings}}
  <section class="mt-20 mb-20">
    {{#banner-message color="bg-warning m-0"}}
      <p>{{t "clusterNew.rke.etcd.backupConfig.legacy" duration=legacyRetention}}</p>
    {{/banner-message}}
  </section>
{{/if}}

<section class="header has-tabs clearfix p-0">
  <ul class="tab-nav">
    {{#if pasteOrUpload}}
      <li>
        <button class="btn bg-transparent" {{action "cancel"}}>{{t "clusterNew.advanced.cancel"}}</button>
      </li>
    {{else}}
      <li>
        <button class="btn bg-transparent" {{action "showPaste"}}>{{t "clusterNew.advanced.yaml"}} <span class="icon icon-copy"></span></button>
      </li>
    {{/if}}
  </ul>
</section>

{{#if (or isEdit (eq step 1))}}
  {{#accordion-list
     showExpandAll=false
     as |al expandFn|
  }}
    {{#if pasteOrUpload}}
      <div class="accordion">
        <div class="accordion-header">
          <div class="expand"></div>
          <div class="title">
            <span class="m-0">{{t "clusterNew.rke.customize.label" }}</span>
            <p class="help-block">{{t "clusterNew.rke.customize.detail" }}</p>
          </div>
        </div>
        <div class="accordion-content">
          <div class="banner bg-info">
            <div class="banner-icon p-10"><i class="icon icon-info"></i></div>
            <div class="banner-message">
              {{t "clusterNew.advanced.helpText"}}
            </div>
          </div>
          <div class="mt-25">
            {{input-yaml
              showDownload=false
              canChangeName=false
              autoResize=true
              value=yamlValue
            }}
          </div>
          {{copy-to-clipboard
            tooltipText=""
            buttonText="copyToClipboard.tooltip"
            clipboardText=yamlValue
            class="with-clip"
          }}
        </div>
      </div>
    {{else}}
      {{#accordion-list-item
         title=(t "clusterNew.rke.customize.label")
         detail=(t "clusterNew.rke.customize.detail")
         expandOnInit=true
         expandAll=al.expandAll
         expand=(action expandFn)
      }}
        <div class="row">
          <div class="col span-6">
            <label class="acc-label">{{t "clusterNew.rke.version.label"}}</label>
            {{form-versions
              cluster=cluster
              editing=(eq mode "edit")
              initialVersion=initialVersion
              value=config.kubernetesVersion
              versions=versionChoices
            }}
          </div>
        </div>
        <div class="row">
          <div class="col {{if (and isCustom (eq mode "new")) "span-4" "span-6"}}">
            <label class="acc-label">{{t "clusterNew.rke.network.label"}}</label>
            {{new-select
              classNames="form-control"
              content=networkContent
              localizedLabel=true
              value=cluster.rancherKubernetesEngineConfig.network.plugin
              disabled=isEdit
            }}
          </div>
          {{#if (and isCustom (eq mode "new"))}}
            <div class="col span-4">
              <label class="acc-label">{{t "clusterNew.rke.windowsSupport.label"}}</label>
              <div class="radio">
                <label class={{if (not-eq cluster.rancherKubernetesEngineConfig.network.plugin "flannel") "text-muted"}}>
                  {{radio-button
                    selection=windowsSupport
                    value=true
                    disabled=(not-eq cluster.rancherKubernetesEngineConfig.network.plugin "flannel")
                  }}
                  {{t "generic.enabled"}}
                </label>
              </div>
              <div class="radio">
                <label class={{if (not-eq cluster.rancherKubernetesEngineConfig.network.plugin "flannel") "text-muted"}}>
                  {{radio-button
                    selection=windowsSupport
                    value=false
                    disabled=(not-eq cluster.rancherKubernetesEngineConfig.network.plugin "flannel")
                  }}
                  {{t "generic.disabled"}}
                </label>
              </div>
            </div>
          {{/if}}
          <div class="col {{if (and isCustom (eq mode "new")) "span-4" "span-6"}}">
            <label class="acc-label">{{t "clusterNew.rke.networkPolicy.label"}}</label>
            <div class="radio">
              <label class={{unless (eq cluster.rancherKubernetesEngineConfig.network.plugin "canal")  "text-muted"}}>
                {{radio-button
                  selection=cluster.enableNetworkPolicy
                  value=true
                  disabled=(not-eq cluster.rancherKubernetesEngineConfig.network.plugin "canal")
                }}
                {{t "generic.enabled"}}
              </label>
            </div>
            <div class="radio">
              <label class={{unless (eq cluster.rancherKubernetesEngineConfig.network.plugin "canal")  "text-muted"}}>
                {{radio-button
                  selection=cluster.enableNetworkPolicy
                  value=false
                  disabled=(not-eq cluster.rancherKubernetesEngineConfig.network.plugin "canal")
                }}
                {{t "generic.disabled"}}
              </label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col span-12">
            {{cru-cloud-provider
              cluster=model.cluster
              driver=nodeWhich
            }}
          </div>
        </div>
      {{/accordion-list-item}}

      {{#advanced-section advanced=advanced}}
        {{#accordion-list-item
           title=(t "cruPrivateRegistry.title.label")
           detail=(t "cruPrivateRegistry.title.detail")
           expandOnInit=(eq mode "edit" true false)
           expandAll=al.expandAll
           expand=(action expandFn)
        }}
          {{cru-private-registry
            cluster=cluster
          }}
        {{/accordion-list-item}}

        {{#accordion-list-item
           title=(t "clusterNew.rke.authorizedEndpoint.title")
           detail=(t "clusterNew.rke.authorizedEndpoint.detail")
           expandOnInit=(eq mode "edit" true false)
           expandAll=al.expandAll
           expand=(action expandFn)
        }}
          {{authorized-endpoint
            cluster=cluster
          }}
        {{/accordion-list-item}}

        {{#accordion-list-item
           title=(t "clusterNew.rke.advanced.label")
           detail=(t "clusterNew.rke.advanced.detail")
           expandOnInit=(eq mode "edit" true false)
           expandAll=al.expandAll
           expand=(action expandFn)
        }}
          <div class="row">
            <div class="col span-4">
              <label class="acc-label">{{t "clusterNew.rke.ingress.label"}}</label>
              <div class="radio">
                <label>
                  {{!--
                    {{radio-button selection=nginxIngressProvider value="nginx"}}
                    --}}
                  {{radio-button
                    selection=cluster.rancherKubernetesEngineConfig.ingress.provider
                    value="nginx"
                  }}
                  {{t "generic.enabled"}}
                </label>
              </div>
              <div class="radio">
                <label>
                  {{!--
                    {{radio-button selection=nginxIngressProvider value=null}}
                    --}}
                  {{radio-button
                    selection=cluster.rancherKubernetesEngineConfig.ingress.provider
                    value="none"
                  }}
                  {{t "generic.disabled"}}
                </label>
              </div>
            </div>
            <div class="col span-4">
              <label class="acc-label">{{t "clusterNew.rke.serviceNodePortRange.label"}}</label>
              {{input
                type="text"
                value=cluster.rancherKubernetesEngineConfig.services.kubeApi.serviceNodePortRange
                className="form-control"
                placeholder=(t "clusterNew.rke.serviceNodePortRange.placeholder")
              }}
            </div>
            <div class="col span-4">
              <label class="acc-label">{{t "clusterNew.rke.monitoring.label"}}</label>
              <div class="radio">
                <label>
                  {{!--
                    {{radio-button selection=monitoringProvider value="metrics-server"}}
                    --}}
                  {{radio-button
                    selection=cluster.rancherKubernetesEngineConfig.monitoring.provider
                    value="metrics-server"
                  }}
                  {{t "generic.enabled"}}
                </label>
              </div>
              <div class="radio">
                <label>
                  {{!--
                    {{radio-button selection=monitoringProvider value=null}}
                    --}}
                  {{radio-button
                    selection=cluster.rancherKubernetesEngineConfig.monitoring.provider
                    value="none"
                  }}
                  {{t "generic.disabled"}}
                </label>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col span-4">
              <label class="acc-label">{{t "clusterNew.rke.podSecurityPolicy.label"}}</label>
              <div class="radio">
                <label class={{unless model.psps.length "text-muted"}}>
                  {{!--
                    {{radio-button selection=kubeApiPodSecurityPolicy value=true disabled=(not model.psps.length)}}
                    --}}
                  {{radio-button
                    selection=cluster.rancherKubernetesEngineConfig.services.kubeApi.podSecurityPolicy
                    value=true
                    disabled=(not model.psps.length)
                  }}
                  {{t "generic.enabled"}}
                  {{#unless model.psps.length}}
                    &mdash; {{t "clusterNew.psp.none"}}
                  {{/unless}}
                </label>
              </div>
              <div class="radio">
                <label>
                  {{!--
                    {{radio-button selection=kubeApiPodSecurityPolicy value=false disabled=(not model.psps.length)}}
                    --}}
                  {{radio-button
                    selection=cluster.rancherKubernetesEngineConfig.services.kubeApi.podSecurityPolicy
                    value=false
                    disabled=(not model.psps.length)
                  }}
                  {{t "generic.disabled"}}
                </label>
              </div>
            </div>
            <div class="col span-4">
              {{#if cluster.rancherKubernetesEngineConfig.services.kubeApi.podSecurityPolicy}}
                <label class="acc-label">{{t "clusterNew.psp.label"}}{{field-required}}</label>
                {{new-select
                  content=model.psps
                  optionLabelPath="displayName"
                  optionValuePath="id"
                  prompt="clusterNew.psp.prompt"
                  localizedPrompt=true
                  value=cluster.defaultPodSecurityPolicyTemplateId
                  disabled=(not cluster.rancherKubernetesEngineConfig.services.kubeApi.podSecurityPolicy)
                }}
              {{else}}
                <label class="acc-label">{{t "clusterNew.psp.label"}}</label>
                <div class="form-control-static">{{t "generic.none"}}</div>
              {{/if}}
            </div>
          </div>
          <div class="row">
            <div class="col span-4">
              <label class="acc-label">{{t "clusterNew.rke.ignoreDockerVersion.label"}}</label>
              <div class="radio">
                <label>
                  {{radio-button
                    selection=cluster.rancherKubernetesEngineConfig.ignoreDockerVersion
                    value=false
                  }}
                  {{t "clusterNew.rke.ignoreDockerVersion.disabled"}}
                </label>
              </div>
              <div class="radio">
                <label>
                  {{radio-button
                    selection=cluster.rancherKubernetesEngineConfig.ignoreDockerVersion
                    value=true
                  }}
                  {{t "clusterNew.rke.ignoreDockerVersion.enabled"}}
                </label>
              </div>
            </div>

            <div class="col span-4">
              <label class="acc-label">{{t "loggingPage.dockerRootDir.label"}}</label>
              {{input
                type="text"
                value=model.cluster.dockerRootDir
                className="form-control"
                placeholder=(t "clusterNew.rke.dockerRootDir.placeholder" dir=defaultDockerRootDir)
              }}
            </div>

          </div>
          <div class="row">
            <div class="col span-3">
              <label class="acc-label">{{t "clusterNew.rke.etcd.location.label"}}</label>
              <select
                class="form-control"
                onchange={{action (mut backupStrategy) value="target.value" }}
              >
                {{#each availableStrategies as |choice|}}
                  <option
                    value={{choice}}
                    selected={{eq backupStrategy choice}}
                  >
                    {{choice}}
                  </option>
                {{/each}}
              </select>
            </div>
          </div>

          <div class="row">
            <div class="col span-3">
              <label class="acc-label">{{t "clusterNew.rke.etcd.backupConfig.interval.label"}}</label>
              <div class="input-group">
                {{input-integer
                  value=cluster.rancherKubernetesEngineConfig.services.etcd.backupConfig.intervalHours
                  min=1
                  classNames="form-control"
                  placeholder=(t "clusterNew.rke.etcd.backupConfig.interval.placeholder")
                }}
                <span class="input-group-addon bg-default">{{t "generic.hours"}}</span>
              </div>
            </div>

            <div class="col span-3 offset-1">
              <label class="acc-label">{{t "clusterNew.rke.etcd.backupConfig.retention.label"}}</label>
              {{input-integer
                value=cluster.rancherKubernetesEngineConfig.services.etcd.backupConfig.retention
                min=1
                classNames="form-control"
                placeholder=(t "clusterNew.rke.etcd.backupConfig.retention.placeholder")
              }}
            </div>
          </div>

          {{#unless (eq backupStrategy "local")}}

            <div class="row">
              <div class="col span-3">
                <label class="acc-label">{{t "clusterNew.rke.etcd.backupConfig.bucketName.label"}}</label>
                {{input
                  type="text"
                  value=cluster.rancherKubernetesEngineConfig.services.etcd.backupConfig.s3BackupConfig.bucketName
                  classNames="form-control"
                  placeholder=(t "clusterNew.rke.etcd.backupConfig.bucketName.placeholder")
                }}
              </div>

              <div class="col span-3 offset-1">
                <label class="acc-label">{{t "clusterNew.rke.etcd.backupConfig.region.label"}}</label>
                {{input
                  type="text"
                  value=cluster.rancherKubernetesEngineConfig.services.etcd.backupConfig.s3BackupConfig.region
                  classNames="form-control"
                  placeholder=(t "clusterNew.rke.etcd.backupConfig.region.placeholder")
                }}
              </div>

              <div class="col span-3 offset-1">
                <label class="acc-label">{{t "clusterNew.rke.etcd.backupConfig.endpoint.label"}}</label>
                {{input
                  type="text"
                  value=cluster.rancherKubernetesEngineConfig.services.etcd.backupConfig.s3BackupConfig.endpoint
                  classNames="form-control"
                  placeholder=(t "clusterNew.rke.etcd.backupConfig.endpoint.placeholder")
                }}
              </div>
            </div>

            <div class="row">

              <div class="col span-3">
                <label class="acc-label">{{t "clusterNew.rke.etcd.backupConfig.accessKey.label"}}</label>
                {{input
                  type="text"
                  name="accessKey"
                  classNames="form-control"
                  placeholder=(t "clusterNew.rke.etcd.backupConfig.accessKey.placeholder")
                  value=cluster.rancherKubernetesEngineConfig.services.etcd.backupConfig.s3BackupConfig.accessKey
                }}
              </div>

              <div class="col span-3 offset-1">
                <label class="acc-label">{{t "clusterNew.rke.etcd.backupConfig.secretKey.label"}}</label>
                {{input
                  type="password"
                  name="password"
                  classNames="form-control"
                  placeholder=(t "clusterNew.rke.etcd.backupConfig.secretKey.placeholder")
                  value=cluster.rancherKubernetesEngineConfig.services.etcd.backupConfig.s3BackupConfig.secretKey
                }}
              </div>

            </div>
          {{/unless}}
        {{/accordion-list-item}}
      {{/advanced-section}}
    {{/if}}
  {{/accordion-list}}
{{/if}}

{{#if (and isCustom (eq step 2)) }}
  {{#accordion-list showExpandAll=false as |al expandFn|}}
    {{#if windowsSupport}}
      {{#accordion-list-item
         title=(t "clusterNew.rke.system.title")
         detail=(t "clusterNew.rke.system.detail")
         expandOnInit=true
         expandAll=al.expandAll
         expand=(action expandFn)
      }}
        <div class="row">
          <div class="col span-6 text-center mt-0 mb-0">
            <div class="radio">
              <label>
                {{radio-button selection=isLinux value=true}}
                {{t "clusterNew.rke.system.linux"}}
              </label>
            </div>
          </div>
          <div class="col span-6 text-center mt-0 mb-0">
            <div class="radio">
              <label>
                {{radio-button selection=isLinux value=false}}
                {{t "clusterNew.rke.system.windows"}}
              </label>
            </div>
          </div>
        </div>
      {{/accordion-list-item}}
    {{/if}}
    {{#accordion-list-item
       title=(t "clusterNew.rke.role.pageheader")
       detail=(t "clusterNew.rke.info.text")
       expandOnInit=true
       expandAll=al.expandAll
       expand=(action expandFn)
    }}
      <section>
        <p>
          <ol class="alphalist ml-40 list-unstyled">
            <li>
              <ul class="list-unstyled">
                <div class="pb-10">
                  <h3 class="mb-0">{{t "clusterNew.rke.role.sectionheader"}}</h3>
                  <p class="help-block">{{t "clusterNew.rke.role.detail"}}</p>
                </div>
                <li>
                  {{t "clusterNew.rke.role.title"}}
                </li>
                <li>
                  <div class="row">
                    <div class="col span-4 text-center mt-0 mb-0">
                      <label class="p-10 pl-30 pr-30 {{unless isLinux "text-muted"}}">
                        {{input
                          type="checkbox"
                          checked=etcd
                          disabled=(not isLinux)
                        }} {{t "clusterNew.rke.role.header.etcd"}}
                      </label>
                    </div>
                    <div class="col span-4 text-center mt-0 mb-0">
                      <label class="p-10 pl-30 pr-30 {{unless isLinux "text-muted"}}">
                        {{input
                          type="checkbox"
                          checked=controlplane
                          disabled=(not isLinux)
                        }} {{t "clusterNew.rke.role.header.controlplane"}}
                      </label>
                    </div>
                    <div class="col span-4 text-center mt-0 mb-0">
                      <label class="p-10 pl-30 pr-30">
                        {{input
                          type="checkbox"
                          checked=worker
                          disabled=(not isLinux)
                        }} {{t "clusterNew.rke.role.header.worker"}}
                      </label>
                    </div>
                  </div>
                  {{#advanced-section advanced=advanced}}
                    <div class="row mt-20">
                      {{t "clusterNew.rke.address.title"}}
                      <p class="help-block">{{t "clusterNew.rke.address.detail"}}</p>
                      <ul class="list-unstyled">
                        <li>
                          <div class="row">
                            <div class="col span-6">
                              <label class="acc-label">{{t "clusterNew.rke.address.public.label"}}</label>
                              {{input
                                type="text"
                                value=address
                                placeholder=(t "clusterNew.rke.address.public.placeholder")
                              }}
                              {{#unless isAddressValid}}
                                <div class="banner bg-warning">
                                  <div class="banner-icon"><span class="icon icon-alert"></span></div>
                                  <div class="banner-message">
                                    <p>{{t "clusterNew.rke.address.warning"}}</p>
                                  </div>
                                </div>
                              {{/unless}}
                            </div>
                            <div class="col span-6">
                              <label class="acc-label">{{t "clusterNew.rke.address.private.label"}}</label>
                              {{input
                                type="text"
                                value=internalAddress
                                placeholder=(t "clusterNew.rke.address.private.placeholder")
                              }}
                              {{#unless isInternalAddressValid}}
                                <div class="banner bg-warning">
                                  <div class="banner-icon"><span class="icon icon-alert"></span></div>
                                  <div class="banner-message">
                                    <p>{{t "clusterNew.rke.address.warning"}}</p>
                                  </div>
                                </div>
                              {{/unless}}
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    {{#if isLinux}}
                      <div class="row mt-20">
                        {{t "clusterNew.rke.nodeName.title"}}
                        <p class="help-block">{{t "clusterNew.rke.nodeName.detail"}}</p>
                        <ul class="list-unstyled">
                          <li>
                            <div class="row">
                              <div class="col span-6">
                                {{input
                                  type="text"
                                  value=nodeName
                                  placeholder=(t "clusterNew.rke.nodeName.placeholder")
                                }}
                                {{#unless isNodeNameValid}}
                                  {{top-errors errors=nodeNameErrors}}
                                {{/unless}}
                              </div>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div class="row mt-20">
                        {{t "clusterNew.rke.labels.title"}}
                        <p class="help-block">{{t "clusterNew.rke.labels.detail"}}</p>
                        <ul class="list-unstyled">
                          <li>
                            {{#form-user-labels
                               setLabels=(action "setLabels")
                               expandAll=al.expandAll
                               expand=(action expandFn)
                               detailKey="formUserLabels.nodeDetail"
                               as | userLabelArray removeLabel addUserLabel |
                            }}
                              {{#if userLabelArray.length}}
                                <table class="table fixed no-lines mt-20">
                                  <tr class="hidden-xs hidden-sm">
                                    <th>{{t "formUserLabels.key.label"}}{{field-required}}</th>
                                    <th width="30">&nbsp;</th>
                                    <th>{{t "formUserLabels.value.label"}}</th>
                                    <th width="40">&nbsp;</th>
                                  </tr>
                                  {{#each userLabelArray as |label|}}
                                    <tr>
                                      <td data-title="key">
                                        {{input-paste
                                          pasted="pastedLabels"
                                          class="form-control input-sm key"
                                          type="text"
                                          value=label.key
                                          placeholder="formUserLabels.key.placeholder"
                                          disabled=(eq label.readonly true)
                                        }}
                                      </td>

                                      <td class="text-center">
                                        <p class="input-sm">{{t "formUserLabels.separator"}}</p>
                                      </td>

                                      <td data-title="label">
                                        {{input
                                          class="form-control input-sm"
                                          type="text"
                                          value=label.value
                                          placeholder=(t "formUserLabels.value.placeholder")
                                          disabled=(eq label.readonly true)
                                        }}
                                      </td>

                                      <td class="text-right">
                                        <button class="btn bg-primary btn-sm" {{action removeLabel label}} disabled={{eq label.readonly true}}><i class="icon icon-minus"/><span class="sr-only">{{t "generic.remove"}}</span></button>
                                      </td>
                                    </tr>
                                  {{/each}}
                                </table>
                                <div class="protip pt-10">
                                  {{t "formUserLabels.protip"}}
                                </div>
                              {{/if}}

                              <button class="btn bg-link icon-btn" {{action addUserLabel}}>
                                <span class="darken"><i class="icon icon-plus text-small"/></span>
                                <span>{{t "formUserLabels.addAction"}}</span>
                              </button>
                            {{/form-user-labels}}
                          </li>
                        </ul>
                      </div>
                    {{/if}}
                  {{/advanced-section}}
                </li>
              </ul>
            </li>
            <li>
              {{t (if isLinux "clusterNew.rke.command.instructions" "clusterNew.rke.command.winInstructions") htmlSafe=true}}
              {{!-- <p class="help-block">{{t "clusterNew.rke.labels.detail"}}</p> --}}
              <ul class="list-unstyled">
                <li>
                  <div class="copy-pre mt-20 mb-20">
                    {{#if loading}}
                      <div class="text-center"><i class="icon icon-spinner icon-spin"></i> {{t "generic.loading"}}</div>
                    {{else if command}}
                      {{copy-to-clipboard
                        clipboardText=command
                        tagName="div"
                        classNames="copy-to-pre"
                      }}
                      <pre id="registration-command" style="font-size: 14px;">{{command}}</pre>
                    {{/if}}
                  </div>
                </li>
              </ul>
            </li>
          </ol>
        </p>

      </section>
    {{/accordion-list-item}}

  {{/accordion-list}}

  {{#if newNodeCount}}
    <div class="banner bg-success">
      <div class="banner-icon"><span class="icon icon-success"></span></div>
      <div class="banner-message">
        <p>{{t "clusterNew.rke.detected" count=newNodeCount}}</p>
      </div>
    </div>
  {{/if}}


{{/if}}

{{top-errors errors=errors}}
{{top-errors errors=clusterErrors}}
{{top-errors errors=otherErrors}}
{{top-errors errors=clusterOptErrors}}

{{#if (or isEdit (eq step 1))}}
  {{save-cancel
    createLabel=(if isCustom "saveCancel.next" "saveCancel.create")
    editing=isEdit
    save="driverSave"
    cancel="close"
  }}
{{else}}
  <div class="footer-actions">
    <button {{action "close"}} class="btn bg-primary">{{t "clusterNew.rke.done"}}</button>
  </div>
{{/if}}
<input type="file" accept="{{actualAccept}}" class="hide">
